<template>
	<view class="guideVideoBar" hover-class="guideVideoBarHoverClass">
		<view class="guideVideoLeft" @click="viewGuideVideo">
			<u--image src="https://file.casugn.com/storecompcard/temp/media／play-circle-fill@2x_1688961375072.png"
				width="40rpx" height="40rpx"></u--image>
			<text class="guideText">30秒了解电子名片</text>
		</view>
		<view class="guideVideoRight" @click="closedGuideVideo">
			<u-icon name="close" color="#4E5969" size="34rpx"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			videoInfo: {
				type: Object
			}
		},
		methods: {
			viewGuideVideo() {
				if (this.videoInfo.status == 0) {
					uni.navigateTo({
						url: `/pagesBusiness/helpList/helpListVideoDetail?url=${this.videoInfo.video}`
					})
				}

			},
			closedGuideVideo() {
				this.$emit('closedGuideVideo')
			}
		}
	}
</script>

<style scoped lang="scss">
	.guideVideoBarHoverClass {
		box-shadow: 2rpx 2rpx 10rpx 3rpx #b7d1f5;
	}

	.guideVideoBar {
		border-radius: 16rpx;
		margin: 32rpx;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		height: 72rpx;
		background-color: #eef3fe;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.guideVideoLeft {
			flex: 1;
			display: flex;
			align-items: center;

			.guideText {
				margin-left: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #4E5969;
				line-height: 34rpx;
			}
		}

		.guideVideoRight {
			width: 40rpx;
			margin-left: 40rpx;

		}

	}
</style>